body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background: #e9edef;
    color: #5e5e5e;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.plan {
    position: absolute;
    width: 110px;
    height: 160px;
    top: 30px;
    left: 25px;
    background: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &.basic {
        &:hover {
            ~ .datas .users .fill,
            ~ .datas .gb .fill,
            ~ .datas .projects .fill {
                transform: scaleX(0.05);
            }
        }
    }
    &.pro {
        left: 145px;
        &:hover {
            ~ .datas .users .fill {
                transform: scaleX(0.3);
            }
            ~ .datas .gb .fill {
                transform: scaleX(0.7);
            }
            ~ .datas .projects .fill {
                transform: scaleX(0.5);
            }
        }
    }
    &.premium {
        left: 265px;
        &:hover {
            ~ .datas .users .fill,
            ~ .datas .gb .fill,
            ~ .datas .projects .fill {
                transform: scaleX(1);
            }
        }
    }

    .title {
        height: 36px;
        text-align: center;
        background: #7dd0ed;
        color: #fff;
        font-weight: 600;
        line-height: 36px;
        font-size: 14px;
        transition: all 0.3s ease-in-out;
    }

    .price {
        text-align: center;
        font-size: 30px;
        line-height: 30px;
        font-weight: 700;
        padding: 16px 0 17px 0;
        transition: all 0.3s ease-in-out;

        span {
            display: block;
            font-size: 12px;
            line-height: 12px;
            font-weight: 400;
        }
    }

    .line {
        height: 3px;
        background: #e4e4e4;
        margin: 0 auto 7px auto;
    }
}

.datas {
    position: absolute;
    height: 160px;
    width: 380px;
    top: 220px;
    left: 10px;
    background: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);

    .data {
        margin: 17px 15px 0 15px;

        .text {
            font-size: 12px;
            height: 20px;
            .left {
                float: left;
            }
            .right {
                float: right;
            }
        }

        .line {
            position: relative;
            z-index: 5;
            width: 100%;
            height: 10px;
            background: #e9edef;
            border-radius: 5px;
            overflow: hidden;

            .fill {
                position: relative;
                z-index: 1;
                height: 10px;
                width: 100%;
                background: #7dd0ed;
                transform: scaleX(0);
                transform-origin: 0 50%;
                transition: all 0.3s ease-in-out;
                border-radius: 3px;
            }
        }
    }
}
